<!-- 关键词 -->
<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="search_form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="关键词名称：">
              <el-input v-model="search_form.name"  placeholder="请输入效果名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关键词类型:">
              <el-select v-model="search_form.type" placeholder="请选择关键词类型" clearable>
                <el-option label="项目" value="1" />
                <el-option label="礼包" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用:">
              <el-select v-model="search_form.status" placeholder="请选择启用状态" clearable>
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" />
          <el-col :span="8">
            <el-form-item label="是否推送营销跳转:">
              <el-select v-model="search_form.marketing_push" placeholder="请选择推送营销跳转" clearable>
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否推送首页:">
              <el-select v-model="search_form.index_push" placeholder="请选择推送营销跳转" clearable>
                <el-option label="是" value="1" />
                <el-option label="否" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" class="el-icon-search" @click="search" >查询</el-button>
              <el-button type="primary"  class="el-icon-refresh" @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24" />
          <el-col :span="24">
            <el-form-item style="float:right">
              <el-button type="primary" plain class="el-icon-plus" @click="add_key">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 列表 -->
    <div class="listDiv">
      <el-table v-loading="table_loading" :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column label="关键词名称" prop="name" align="center"  />
        <el-table-column label="关键词类型" prop="type" align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.type == 1 ? '项目' : '礼包'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" align="center"  />
        <el-table-column label="创建时间"  align="center" >
          <template slot-scope="scope">
            <span>{{scope.row.created_at | formatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="关联数量" prop="relation_count" align="center" >
          <template slot-scope="scope">
            <div
              style="color: #409eef; cursor:pointer"
              @click="link(scope.row)"
            > {{scope.row.relation_count}}</div>
          </template>
        </el-table-column>
        <el-table-column label="推送首页" align="center" >
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.index_push"
                :active-value="1"
                :inactive-value="0"
                @change="changeSwitch($event,'index_push',scope.row.id)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="推送营销跳转" align="center" >
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.marketing_push"
                :active-value="1"
                :inactive-value="0"
                @change="changeSwitch($event,'marketing_push',scope.row.id)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="启用" align="center" >
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="changeSwitch($event,'status',scope.row.id)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template slot-scope="scope">
            <!--            <el-button type="text" size="mini" @click="search_detail(scope.row)">查看</el-button>-->
            <el-button type="text" @click="edit_key(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="delete_key(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        :current-page="search_form.page"
        :page-sizes="[10,20,50,100]"
        :page-size="search_form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 关联内容 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" class="dialog"  width="1200px">
      <div class="detail project_detail" style="width: 1150px;" >
        <div class="app-container">
          <!-- form行 -->
          <div class="formDiv">
            <el-form ref="formProject" :inline="true"  label-width="130px" >
              <el-row>
                    <el-col :span="8">
                      <el-form-item label="上架状态:">
                        <el-select v-model="search_dia_form.status" placeholder="请选择上架状态" clearable>
                          <el-option label="上架" value="1" />
                          <el-option label="下架" value="0" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                <el-form-item label="">
                  <el-button type="primary medium" @click="search_dia()">搜索</el-button>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
          <!-- 表格 -->
          <div class="tableWrap">
            <el-table
              v-loading="dia_loading"
              ref="tableData"
              :data="diaData"
              height="250"
              style="width: 100%"
            >
              <!-- id -->
<!--              <el-table-column type="selection" width="55" :reserve-selection="true" />-->
              <el-table-column fixed type="index" label="序号" width="50" />
              <el-table-column  v-for="(item, index) in tableHead" :label="item.label" :property="item.property"
                                :key="index">
                <template slot-scope="scope">

                    <span v-if="scope.column.property === 'groupMasterPicture' || scope.column.property === 'slaveImage' ">
                       <img :src="common.img_url+scope.row[scope.column.property]" alt class="smallBG" />
                      </span>
                  <span v-else >
                      <span v-if="scope.column.property !== 'comboType' && scope.column.property !== 'status' ">
                         {{scope.row[scope.column.property]}}
                      </span>
                    </span>
                  <span v-if="scope.column.property === 'comboType'">
                    <span v-if="scope.row[scope.column.property] == 0">正常购买</span>
                    <span v-if="scope.row[scope.column.property] == 1">优惠券</span>
                   </span>
                  <span v-if="scope.column.property === 'status'">
                    <span v-if="scope.row[scope.column.property] == 0">否</span>
                    <span v-if="scope.row[scope.column.property] == 1">是</span>
                   </span>
                  <span v-if="scope.column.property === 'provinceName'">
                    <span v-if="scope.row[scope.column.property] == null">全国</span>
                   </span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页器 -->
          <div class="block">
            <el-pagination
              background
              :page-sizes="[10,20,50,100]"
              :page-size="search_dia_form.pageSize"
              :pager-count="11"
              layout="total, sizes, prev, pager, next"
              :total="dia_total"
              @current-change="handleDiaChange"
              @size-change="handleDiaSizeChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { keyWordDelete, keyWordList, keyWordSwitch } from '../../../api/keyWord'
  import { formatDate } from '../../../components/FormatDate/formateDate'
  import { updateIndex } from '../../../api/drop'
  import { projectList } from '../../../api/project'
  import { getGoodsList } from '../../../api/goods'

  export default {
    filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd hh:mm')
      }
    },
    data() {
      return {
        exampleProject:[
          {
            label:'排序',
            property:'sort'
          },{
            label:'项目名称',
            property:'groupProjectName'
          },{
            label:'项目分类',
            property:'projectCategoryName'
          },{
            label:'项目图片',
            property:'groupMasterPicture'
          },{
            label:'省份',
            property:'provinceName'
          },{
            label:'医院名称',
            property:'hospitalName'
          },{
            label:'价格类型',
            property:'payTypeName'
          },{
            label:'原价',
            property:'price'
          },{
            label:'拼团价',
            property:'groupPrice'
          },{
            label:'原价定金',
            property:'subscription'
          },{
            label:'拼团定金',
            property:'groupSubscription'
          },{
            label:'是否上架',
            property:'status'
          }
        ],
        exampleGoods:[
          {
            label:'排序',
            property:'sortWidget'
          }, {
            label: '套餐名称',
            property: 'name'
          },{
            label:'套餐图片',
            property:'slaveImage'
          },{
            label:'礼包地区',
            property:'provinceName'
          },{
            label:'礼包内容',
            property:'comboType'
          },{
            label:'展示价',
            property:'price'
          },{
            label:'售价',
            property:'yprice'
          },{
            label:'是否上架',
            property:'status'
          }
        ],
        tableHead:this.exampleProject,
        dialogVisible:false,
        link_type:'',
        title:'',
        status:'',//弹窗筛选 是否上架
        dia_loading:false,
        dia_total:0,
        diaData:[],
        search_dia_form:{
          status:"",
          pageNum: 1,
          pageSize: 10,
          id:"",
        },
        search_form:{
          name:'',
          status:'',
          type:'',//	关键词类型：1项目2礼包
      	  index_push:'',//	是否推送首页：0关闭1开启
      	  marketing_push:'',//	是否推送营销跳转：0关闭1开启
          page: 1,
          pageSize: 10,
        },//搜索表单
        total: 0,
        table_loading:false,//表格loading状态
        tableData:[],//表格数据
      }
    },


    mounted() {
      this.get_key(this.search_form)
    },

    methods: {
      // 序号
      table_index(index) {
        return (this.search_form.page - 1) * this.search_form.pageSize + index + 1;
      },

      //筛选
      search(){
        this.get_key(this.search_form)
      },

      //重置
      reset(){
        this.search_form.name = ''
        this.search_form.status = ''
        this.search_form.type = ''
        this.search_form.index_push = ''
        this.search_form.marketing_push = ''
        this.search_form.page = 1
        this.search_form.pageSize = 10
        this.get_key(this.search_form)
      },

      //获取列表
      async get_key(opt){
        this.table_loading = true
        let res = await keyWordList(opt);
        if(res.data.status == 0){
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          this.table_loading = false
        } else {
          this.tableLoading = false;
          this.$message({
            showClose: true,
            message: res.data.message,
            type: "error",
          });
        }
      },

      //获取项目列表
      get_project_list() {
        this.dia_loading = true;
        projectList({
          groupProjectName : '',
          projectCategoryId :'',
          hospitalName :'',
          provinceId :'',
          keywordId:this.search_dia_form.id == "" ? null : this.search_dia_form.id,
          status :this.search_dia_form.status,
          pageNum: this.search_dia_form.pageNum,
          pageSize: this.search_dia_form.pageSize,
        })
          .then((result) => {
            const res = result.data;
            if (res.code === 0) {
              res.data.list.forEach((item) => {
                item.status = item.status - 0;
              });
              this.diaData = res.data.list;
              this.dia_total = res.data.count;
              this.dia_loading = false;
            }
          })
          .catch((err) => {
            this.dia_loading = false;
            //   this.$message.error('服务器网络错误，请稍后重试');
            this.$message.error(err);
          });
      },

      //获取礼包列表
      get_goods_list() {
        this.dia_loading = true;
        getGoodsList({
          name : '',
          comboType: null,
          status : this.search_dia_form.status == "" ? null : this.search_dia_form.status ,
          keyWordId:this.search_dia_form.id == "" ? null : this.search_dia_form.id,
          pageNum: this.search_dia_form.pageNum,
          pageSize: this.search_dia_form.pageSize,
        })
          .then((res) => {
            this.dia_total = res.data.data.count;
            this.search_dia_form.pageNum = res.data.data.pageNum;
            this.search_dia_form.pageSize = res.data.data.pageSize;
            this.diaData = res.data.data.list;
            this.dia_loading = false;
          })
          .catch((error) => {
            this.dia_loading = false;
            this.$message.error("网络连接错误，请稍后再试");
          });
      },

      //添加
      add_key(){
        this.$router.push({
          path: "/add_keyword",
          query: {
            page_status: 1,//
          },
        });
      },

      //编辑
      edit_key(id){
        this.$router.push({
          path: "/add_keyword",
          query: {
            page_status: 2,//
            id:id
          },
        });
      },

      //删除
      delete_key(id){
        this.$confirm("确认删除该关键字吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
        keyWordDelete({
          keyword_id:id
        })
          .then((res) => {
            if(res.data.status == 0){
              this.$message.success("删除成功")
              this.search()
            }else {
              this.$message.error("删除失败，",res.data.message);
            }
          }).catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: "error",
          });
             });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },

      //修改状态
       changeSwitch(status,type,id){
       // 类型：首页推送 index_push，推送营销跳转marketing_push，开关 status
       keyWordSwitch({
           type:type,
           status:status,
           keyword_id:id,
         }) .then((res) => {
           if(res.data.status == 0){
             this.$message({
               showClose: true,
               message: "修改上下架成功" ,
               type: "success",
             });
             this.search()
           }else {
             this.$message.error("修改上下架失败" ,res.data.message);
           }
         }).catch((res) => {
           this.$message({
             showClose: true,
             message: res.data.message,
             type: "error",
           });
         });
      },

      link(e){
        console.log("e",e)
        this.link_type = e.type
        this.title = e.type == 1 ?"关联项目" : "关联礼包"
        this.tableHead = e.type == 1 ? this.exampleProject : this.exampleGoods
        this.search_dia_form.id = e.id
        this.dialogVisible = true
        this.search_dia()
      },

      // 弹窗筛选
      search_dia(){
        if(this.link_type == 1){
          this.get_project_list()
        }else {
          this.get_goods_list()
        }
      },

      // 当前页面改变
      handleCurrentChange(val) {
        this.search_form.page = val
        this.search()
      },
      //条数改变
      handleSizeChange(val) {
        this.search_form.pageSize = val
        this.search_form.page = 1
        this.search()
      },

      // 当前页面改变
      handleDiaChange(val) {
        this.search_dia_form.pageNum = val
        this.search_dia()
      },
      //条数改变
      handleDiaSizeChange(val) {
        this.search_dia_form.pageSize = val
        this.search_dia_form.pageNum = 1
        this.search_dia()
      },
    }
  }
</script>
<style  scoped>
  .smallBG {
    width: 40px;
    height: 40px;
  }
</style>
